<script setup>
import { useRoute } from '@/router/index.js';
import { useAlarmToday } from './hooks.js';
import { useMain } from '@/store/app.js';
import JCHome from './JCHome.vue';
import TGHome from './TGHome.vue';
import FloatMsg from './components/FloatMsg.vue';
const route = useRoute();
const { projectType, changeProjectType } = useMain();
changeProjectType(route.query?.type || 'TG');
console.log('[ route.query?.type ] >', route.query?.type, projectType);
const type = ref(route.query?.type || 'TG');
const floatMsg = ref(null);
const handleType = val => (type.value = val);
const [alarmList] = useAlarmToday();
</script>

<template>
  <div class="app-container">
    <JCHome v-if="type === 'JC'" @handleRadioChange="handleType" />
    <TGHome v-else @handleRadioChange="handleType" />
    <FloatMsg ref="floatMsg" :type="type" :data="alarmList" />
  </div>
</template>

<style lang="scss">
.EMHome-adaptive {
  display: flex;
  flex-direction: column;
}
.EMHome-left {
  width: calc(75.5% - 20px);
  height: 100%;
  margin-right: 20px;
}
.EMHome-right {
  width: 24.5%;
  height: 100%;
  .home-calendar {
    width: 100%;
    height: calc((100% - 20px) / 2);
  }
}
.EMHome-chartBox {
  width: 100%;
  height: calc((100% - 40px) / 3);
}
.homeChart-subBox {
  width: calc((100% - 20px) / 2);
  height: 100%;
}
.u-title20 {
  height: 20px;
  line-height: 20px;
}
</style>
